<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor
      v-model="value"
      style="height: 500px; overflow-y: hidden"
      :default-config="editorConfig"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from 'vue';
import store from '@/store';
import { getCache } from '@/utils/session';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
// import { upload } from "@/api/guideCertificate/guideCertificateIndex";
// import { getToken } from '@/utils/auth';
import { DomEditor } from '@wangeditor/editor';
const action =
  process.env.NODE_ENV === 'development' ? '/api/hydrobim/upload/uploadFile' : '/hydrobim/upload/uploadFile';
const editorConfig = {
  // JS 语法
  MENU_CONF: {}

  // 其他属性...
};
editorConfig.MENU_CONF['uploadImage'] = {
  server: action,
  fieldName: 'file',
  meta: { type: 12 },
  // 自定义增加 http  header
  headers: {
    'API-User-Token': getCache('TOKEN')
  },
  maxFileSize: 1 * 1024 * 1024,
  allowedFileTypes: ['.jpg', '.png', '.jpeg'],
  // async customUpload(file, insertFn) {
  //   // JS 语法
  //   console.log(file);
  //   const fileData = new FormData();
  //   fileData.append("multipartFile", file);
  //   upload(fileData).then((res) => {
  //     insertFn(res.data.filePath, "", "");
  //   });

  //   // file 即选中的文件
  //   // 自己实现上传，并得到图片 url alt href
  //   // 最后插入图片
  //   // insertFn(url, alt, href)
  // },
  // 自定义插入图片
  customInsert(res, insertFn) {
    // res 即服务端的返回结果
    let data = res.data;
    // 从 res 中找到 url alt href ，然后插图图片
    insertFn(data.fileIds[0], data.fileNames[0], data.fileIds[0]);
  }
  // 继续写其他配置...

  // 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
};
// editorConfig.MENU_CONF["uploadVideo"] = {
//   server: "/concatenation/dzznInfo/upload",
//   fieldName: "multipartFile",
//   // 自定义增加 http  header
//   headers: {
//     Authorization: getToken(),
//   },
//   async customUpload(file, insertFn) {
//     // JS 语法
//     console.log(file);
//     const fileData = new FormData();
//     fileData.append("multipartFile", file);
//     upload(fileData).then((res) => {
//       insertFn(res.data.filePath, "", "");
//     });

//     // file 即选中的文件
//     // 自己实现上传，并得到图片 url alt href
//     // 最后插入图片
//     // insertFn(url, alt, href)
//   },
//   // 继续写其他配置...

//   // 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
// };

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    value: {
      type: [Number, String],
      default: undefined
    },
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      editorContent: null,
      editorContents: null,
      html: undefined,
      toolbarConfig: {},
      editorConfig,
      mode: 'default' // or 'simple'
    };
  },
  mounted() {},
  watch: {
    value(nl, ol) {
      this.onChange(this.editor);
    },
    isLook(nl) {
      if (nl) {
        this.editor.disable();
      } else {
        this.editor.enable();
      }
    }
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      //
      if (this.isLook) {
        this.editor.disable();
      }
      if (this.value == '') {
        this.value = undefined;
      }
      this.toolbarConfig = {
        excludeKeys: ['fullScreen', 'group-video', 'insertImage', 'group-image', 'emotion']
      };
      this.editorContents = editor.getText();

      if (this.editorContents) {
        this.editorContent = editor.getHtml();
        this.$emit('change', this.editorContent);
      } else {
        this.$emit('change', '');
      }
    },
    onChange(editor) {
      //   console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      this.editorContents = editor.getText();
      if (this.editorContents) {
        this.editorContent = editor.getHtml();
        this.$emit('change', this.editorContent);
      } else {
        this.$emit('change', '');
      }
      // this.$emit("change", editor.getHtml());
      // const toolbar = DomEditor.getToolbar(editor);
      // console.log('工具栏配置', toolbar.getConfig().toolbarKeys); // 工具栏配置
    }
  }
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
.notice {
  table {
    border: none;
    border-collapse: collapse;
    margin-top: 25px;
  }
  table td,
  table th {
    border: 1px solid #ccc;
    padding: 3px 5px;
    min-width: 50px;
    height: 20px;
  }
  table th {
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: #f1f1f1;
  }
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }
  ul,
  ol {
    margin: 10px 0 10px 20px;
  }
  pre {
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 10px;
    margin: 5px 0px;
    font-size: 0.8em;
    border-radius: 3px;
  }
  .ql-editor ul li {
    list-style-type: disc; // 解决序列li前面的.不展示问题
  }
  .ql-editor ol li {
    list-style-type: decimal; // 解决序列li前面的数字不展示问题
  }
}
</style>
